<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MakeaBata</title>
  <meta name="description" content="MakeaBata——为中国用户设计的现代编辑器。还差4个月就会发布应用，欢迎订阅发布提醒与提交意见。" />
  <style>
    :root {
      --primary:#335ef7;
      --primary-dark:#2746c6;
      --bg:#0b1020;
      --card:#0f1430;
      --text:#e9ecf5;
      --muted:#9aa3b2;
      --accent:#00d4ff;
      --warning:#ffcc00;
      --border:rgba(255,255,255,.08);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:linear-gradient(180deg,#0a0f1e 0%, #0d1633 100%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
    a{color:inherit;text-decoration:none}
    .container{max-width:1200px;margin:0 auto;padding:0 20px}

    /* Header */
    header{position:sticky;top:0;z-index:50;background:rgba(13,22,51,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
    .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 20px rgba(51,94,247,.4)}
    .links{display:flex;gap:20px}
    .links a{padding:8px 10px;border-radius:8px;color:var(--muted)}
    .links a:hover{color:#fff;background:rgba(255,255,255,.06)}
    .actions{display:flex;gap:10px}
    .btn{padding:8px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;color:#fff;background:transparent;transition:.2s}
    .btn.primary{background:var(--primary);border-color:transparent}
    .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}

    .hamburger{display:none;flex-direction:column;gap:4px}
    .hamburger span{width:24px;height:2px;background:#fff;border-radius:2px}
    @media (max-width: 860px){
      .links{display:none}
      .hamburger{display:flex}
    }
    .mobile-menu{display:none;border-top:1px solid var(--border);background:rgba(13,22,51,.95)}
    .mobile-menu a{display:block;padding:14px 20px;border-bottom:1px solid var(--border);color:var(--muted)}
    .mobile-menu a:hover{color:#fff;background:rgba(255,255,255,.06)}

    /* Hero */
    .hero{padding:80px 0 40px}
    .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
    .title{font-size:48px;line-height:1.15;margin:0 0 12px}
    .subtitle{color:var(--muted);font-size:18px;margin:8px 0 18px}
    .countdown{font-weight:800;color:var(--warning);font-size:20px;margin:14px 0}
    .hero-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
    .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
    .metric{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
    .metric .k{font-weight:800;font-size:20px}
    .cta{display:flex;gap:12px;margin-top:16px}

    @media (max-width: 960px){
      .hero-grid{grid-template-columns:1fr}
      .title{font-size:36px}
    }

    /* Sections */
    section{padding:60px 0;border-top:1px solid var(--border)}
    .section-title{font-size:28px;margin:0 0 16px}
    .section-sub{color:var(--muted);margin:0 0 24px}

    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;transition:.25s}
    .card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.28)}
    .card h3{margin:0 0 8px}
    .card p{color:var(--muted);margin:0 0 12px}
    .card .mini{display:flex;gap:10px;align-items:center}
    .mini a{color:var(--accent)}

    @media (max-width: 960px){
      .cards{grid-template-columns:1fr}
    }

    /* Timeline */
    .timeline{position:relative;padding-left:20px}
    .timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--border)}
    .time-item{position:relative;margin:14px 0;padding-left:18px}
    .time-item::before{content:'';position:absolute;left:2px;top:6px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 10px rgba(0,212,255,.35)}

    /* FAQ */
    .faq-item{background:var(--card);border:1px solid var(--border);border-radius:12px;margin:10px 0;overflow:hidden}
    .faq-q{padding:14px 16px;cursor:pointer;font-weight:700}
    .faq-a{display:none;padding:0 16px 14px;color:var(--muted)}

    /* Feedback */
    .fb-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .fb-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
    .field{display:flex;gap:8px;margin:10px 0}
    .field input,.field textarea{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;border-radius:10px;padding:10px}
    .hint{color:var(--muted);font-size:12px}
    .list{margin-top:10px;max-height:220px;overflow:auto;border:1px dashed var(--border);border-radius:10px;padding:8px;background:rgba(255,255,255,.02)}
    .item{padding:6px 0;border-bottom:1px dotted var(--border)}
    .item:last-child{border-bottom:none}

    @media (max-width: 960px){
      .fb-wrap{grid-template-columns:1fr}
    }

    /* Footer */
    footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted)}

    /* Utilities */
    .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s, transform .5s}
    .reveal.in{opacity:1;transform:none}
    .to-top{position:fixed;right:18px;bottom:18px;background:var(--primary);border:none;color:#fff;border-radius:24px;padding:10px 14px;cursor:pointer;display:none}
  </style>
</head>
<body>
  <header>
    <div class="container nav">
      <div class="brand"><div class="logo"></div>MakeaBata</div>
      <nav class="links" aria-label="主导航">
        <a href="#features">特性</a>
        <a href="#scenes">使用场景</a>
        <a href="#plan">发布计划</a>
        <a href="#news">动态</a>
        <a href="#faq">FAQ</a>
        <a href="#about">关于</a>
      </nav>
      <div class="actions">
        <button class="btn" id="subscribeBtn">订阅提醒</button>
        <button class="btn primary" onclick="scrollToId('features')">立即了解</button>
        <div class="hamburger" id="hamburger" aria-label="打开菜单" aria-expanded="false" role="button" tabindex="0">
          <span></span><span></span><span></span>
        </div>
      </div>
    </div>
    <div class="mobile-menu" id="mobileMenu">
      <a href="#features">特性</a>
      <a href="#scenes">使用场景</a>
      <a href="#plan">发布计划</a>
      <a href="#news">动态</a>
      <a href="#faq">FAQ</a>
      <a href="#about">关于</a>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="container hero-grid">
        <div>
          <h1 class="title">为国人设计的现代编辑器 MakeaBata</h1>
          <p class="countdown">还差4个月就会发布应用</p>
          <p class="subtitle">这是一个专门为国人设计的编辑器，还剩4个月就完成了，这是一个测试的网页</p>
          <div class="cta">
            <button class="btn primary" onclick="scrollToId('features')">查看特性</button>
            <button class="btn" onclick="scrollToId('fb')">提交意见</button>
          </div>
          <div class="metrics">
            <div class="metric"><div class="k">4</div><div class="s">月发布倒计时</div></div>
            <div class="metric"><div class="k">100%</div><div class="s">离线可用</div></div>
            <div class="metric"><div class="k">0</div><div class="s">外部依赖</div></div>
          </div>
        </div>
        <div class="hero-card">
          <img src="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' width='520' height='300'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop stop-color='%23335ef7'/><stop offset='1' stop-color='%2300d4ff'/></linearGradient></defs><rect width='100%' height='100%' fill='%2310183a'/><g><rect x='20' y='20' rx='10' ry='10' width='480' height='260' fill='url(%23g)' opacity='0.2'/><rect x='40' y='50' width='440' height='16' fill='%23fff' opacity='0.5'/><rect x='40' y='80' width='360' height='12' fill='%23fff' opacity='0.35'/><rect x='40' y='110' width='400' height='12' fill='%23fff' opacity='0.35'/><rect x='40' y='150' width='120' height='80' fill='%23fff' opacity='0.1'/><rect x='180' y='150' width='120' height='80' fill='%23fff' opacity='0.1'/><rect x='320' y='150' width='120' height='80' fill='%23fff' opacity='0.1'/></g></svg>" alt="预览插画" style="width:100%;border-radius:12px;border:1px solid var(--border)" />
        </div>
      </div>
    </section>

    <section id="features" class="reveal">
      <div class="container">
        <h2 class="section-title">核心特性</h2>
        <p class="section-sub">高效、稳定、贴合中文场景的创作体验</p>
        <div class="cards">
          <div class="card" id="feature-1">
            <h3>极速启动</h3>
            <p>零依赖、轻量架构，便捷启动，打开极快。</p>
            <div class="mini"><a href="#fb" onclick="prefill('feature-1')">评论此特性</a></div>
          </div>
          <div class="card" id="feature-2">
            <h3>沉浸写作</h3>
            <p>暗色主题护眼，专注于内容本身。</p>
            <div class="mini"><a href="#fb" onclick="prefill('feature-2')">评论此特性</a></div>
          </div>
          <div class="card" id="feature-3">
            <h3>国产适配</h3>
            <p>更懂中文排版与输入法细节。</p>
            <div class="mini"><a href="#fb" onclick="prefill('feature-3')">评论此特性</a></div>
          </div>
          <div class="card" id="feature-4">
            <h3>多格式转换</h3>
            <p>支持多种格式相互转换，导入导出一键完成。</p>
            <div class="mini"><a href="#fb" onclick="prefill('feature-4')">评论此特性</a></div>
          </div>
          <div class="card" id="feature-5">
            <h3>C++ JUCE 内核</h3>
            <p>基于 C++ 与 JUCE 框架开发，性能稳定、扩展灵活。</p>
            <div class="mini"><a href="#fb" onclick="prefill('feature-5')">评论此特性</a></div>
          </div>
        </div>
      </div>
    </section>

    <section id="scenes" class="reveal">
      <div class="container">
        <h2 class="section-title">使用场景</h2>
        <p class="section-sub">写作、笔记、代码片段管理等一站式支持</p>
        <div class="cards">
          <div class="card"><h3>博客创作</h3><p>从草稿到发布，所见即所得。</p></div>
          <div class="card"><h3>学术笔记</h3><p>多级大纲与公式渲染，结构清晰。</p></div>
          <div class="card"><h3>工程文档</h3><p>代码高亮与片段管理，高效协作。</p></div>
        </div>
      </div>
    </section>

    <section id="plan" class="reveal">
      <div class="container">
        <h2 class="section-title">发布计划</h2>
        <p class="section-sub">倒计时 4 个月，功能持续完善中</p>
        <div class="timeline">
          <div class="time-item"><strong>第1个月</strong> 完成核心编辑器内核与文件系统</div>
          <div class="time-item"><strong>第2个月</strong> 加入模板与主题市场</div>
          <div class="time-item"><strong>第3个月</strong> 性能优化与移动端适配</div>
          <div class="time-item"><strong>第4个月</strong> 公测与正式发布</div>
        </div>
      </div>
    </section>

    <section id="news" class="reveal">
      <div class="container">
        <h2 class="section-title">最新动态</h2>
        <p class="section-sub">跟进 MakeaBata 的每一步更新</p>
        <div class="cards">
          <div class="card" id="news-2025-10"><h3>2025年10月</h3><p>进入开发冲刺阶段。</p><div class="mini"><a href="#fb" onclick="prefill('news-2025-10')">对此条动态评论</a></div></div>
          <div class="card" id="news-2025-09"><h3>2025年9月</h3><p>完成核心功能开发。</p><div class="mini"><a href="#fb" onclick="prefill('news-2025-09')">对此条动态评论</a></div></div>
          <div class="card" id="news-2025-08"><h3>2025年8月</h3><p>团队与品牌升级，体验焕新。</p><div class="mini"><a href="#fb" onclick="prefill('news-2025-08')">对此条动态评论</a></div></div>
        </div>
      </div>
    </section>

    <section id="faq" class="reveal">
      <div class="container">
        <h2 class="section-title">常见问题</h2>
        <div class="faq-item"><div class="faq-q">支持哪些平台？</div><div class="faq-a">首发桌面端（Windows/macOS），后续适配移动端浏览器。</div></div>
        <div class="faq-item"><div class="faq-q">离线可用吗？</div><div class="faq-a">支持，核心功能在离线场景下可独立运行。</div></div>
        <div class="faq-item"><div class="faq-q">数据如何保存？</div><div class="faq-a">默认保存在本地（localStorage），支持导入导出；未来将提供可选云同步。</div></div>
        <div class="faq-item"><div class="faq-q">多格式转换支持哪些？</div><div class="faq-a">计划支持常见文本/文档格式互转，如 Markdown（.md）、HTML（.html）、纯文本（.txt）、富文本（.rtf）、Docx（.docx）、PDF 导出等，并逐步扩展。</div></div>
        <div class="faq-item"><div class="faq-q">C++ JUCE 内核有什么优势？</div><div class="faq-a">基于 C++ 与 JUCE，拥有更好的原生性能与跨平台一致性，同时便于扩展音频/图形等能力。</div></div>
        <div class="faq-item"><div class="faq-q">启动与性能如何保证？</div><div class="faq-a">通过精简依赖、延迟加载与资源缓存，实现“点击即开”的顺滑体验。</div></div>
        <div class="faq-item"><div class="faq-q">是否收费？</div><div class="faq-a">基础功能免费，后续可能提供专业版功能（定价未定），将提前公示并给出优惠方案。</div></div>
        <div class="faq-item"><div class="faq-q">什么时候发布？</div><div class="faq-a">预计 4 个月后发布公测版本，请在顶部点击“订阅提醒”获取第一时间通知。</div></div>
        <div class="faq-item"><div class="faq-q">如何提交功能建议？</div><div class="faq-a">前往页面底部“用户反馈”模块，选择关联模块并提交建议，数据仅存储在你的本地设备。</div></div>
      </div>
    </section>

    <section id="fb" class="reveal">
      <div class="container">
        <h2 class="section-title">用户反馈</h2>
        <p class="section-sub">你的建议将直接影响产品路线。反馈仅保存在你的设备本地。</p>
        <div class="fb-wrap">
          <div class="fb-card">
            <h3>提交反馈</h3>
            <div class="field"><input id="fb-name" type="text" placeholder="昵称（可选）" /></div>
            <div class="field"><input id="fb-tag" type="text" placeholder="关联模块（例如：feature-1 / news-2025-10），可留空" /></div>
            <div class="field"><textarea id="fb-text" rows="4" placeholder="写下你的想法与建议…"></textarea></div>
            <div class="field" style="justify-content:flex-end"><button class="btn primary" onclick="submitFeedbackFlexible()">提交</button></div>
            <div class="hint">安全提示：我们会对展示内容进行转义，防止脚本注入。</div>
          </div>
          <div class="fb-card">
            <h3>反馈列表</h3>
            <div class="field"><input id="fb-filter" type="text" placeholder="按模块过滤（留空查看全部）" oninput="renderFlexible()"/></div>
            <div class="list" id="fb-list"></div>
          </div>
        </div>
      </div>
    </section>

    <section id="about" class="reveal">
      <div class="container">
        <h2 class="section-title">关于 MakeaBata</h2>
        <p class="section-sub">专为中文用户打造，注重细节与性能的现代编辑器。</p>
        <div class="cards">
          <div class="card"><h3>愿景</h3><p>让每一次创作都更顺手、更愉悦。</p></div>
          <div class="card"><h3>价值</h3><p>尊重中文排版与阅读习惯，拥抱开放标准。</p></div>
          <div class="card"><h3>路线</h3><p>以用户反馈为导向，持续精进体验。</p></div>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">© 2025 MakeaBata · 保留所有权利 · <a href="#fb">反馈</a></div>
  </footer>

  <button class="to-top" id="toTop" aria-label="返回顶部" onclick="scrollToId('top')">↑</button>

  <script>
    // Smooth scroll
    function scrollToId(id){
      const el = id==='top' ? document.body : document.getElementById(id);
      if(!el){ return; }
      const y = id==='top' ? 0 : el.getBoundingClientRect().top + window.scrollY - 64;
      window.scrollTo({top:y,behavior:'smooth'});
    }

    // Mobile menu toggle
    const hamburger=document.getElementById('hamburger');
    const mobileMenu=document.getElementById('mobileMenu');
    if(hamburger){
      const toggle=()=>{
        const open = mobileMenu.style.display !== 'block';
        mobileMenu.style.display = open ? 'block':'none';
        hamburger.setAttribute('aria-expanded', String(open));
      };
      hamburger.addEventListener('click', toggle);
      hamburger.addEventListener('keypress', e=>{ if(e.key==='Enter') toggle(); });
      mobileMenu.addEventListener('click', e=>{ if(e.target.tagName==='A'){ mobileMenu.style.display='none'; hamburger.setAttribute('aria-expanded','false'); }});
    }

    // Reveal on scroll
    const io=new IntersectionObserver(entries=>{
      entries.forEach(en=>{ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target);} });
    },{threshold:.18});
    document.querySelectorAll('.reveal').forEach(el=>io.observe(el));

    // Back to top
    const toTop=document.getElementById('toTop');
    window.addEventListener('scroll',()=>{
      toTop.style.display = window.scrollY>300 ? 'block':'none';
    });

    // Subscribe reminder (local only)
    const subKey='makea:subscribers';
    function getLocal(key){ try{return JSON.parse(localStorage.getItem(key)||'[]')}catch(e){return[]} }
    function setLocal(key,val){ try{localStorage.setItem(key,JSON.stringify(val))}catch(e){ alert('存储已满或被禁用'); } }
    document.getElementById('subscribeBtn').addEventListener('click',()=>{
      const email = prompt('输入邮箱以订阅发布提醒：');
      if(!email) return;
      if(!/^\S+@\S+\.\S+$/.test(email)){ alert('请输入有效邮箱'); return; }
      const list=getLocal(subKey);
      if(list.includes(email)){ alert('你已订阅过啦'); return; }
      list.push(email); setLocal(subKey,list); alert('订阅成功（仅存储在本地）');
    });

    // Feedback (compatible with之前模块 keys)
    const fbKey='feedback:flexible';
    const legacyKeys=['feature-1','feature-2','feature-3','news-2025-10','news-2025-09','news-2025-08'];
    function escapeHtml(str){ return String(str).replace(/[&<>"']/g,s=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[s])); }
    function now(){ const d=new Date(); const p=n=>String(n).padStart(2,'0'); return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}` }
    function loadAll(){
      const cur=getLocal(fbKey);
      const merged=[...cur];
      legacyKeys.forEach(id=>{
        const arr=getLocal(`feedback:${id}`);
        arr.forEach(x=>{ merged.push({ name:x.name||'', text:x.text||'', tag:id, time:x.time?new Date(x.time).toISOString():new Date().toISOString() }); });
      });
      return merged;
    }
    function renderFlexible(){
      const listEl=document.getElementById('fb-list');
      const filter=(document.getElementById('fb-filter').value||'').trim();
      const data=loadAll().sort((a,b)=> (b.time||'').localeCompare(a.time||''));
      const rows=data.filter(x=>!filter||String(x.tag||'').includes(filter)).map(x=>{
        const t=x.time? (x.time.includes('-')? x.time : now()) : now();
        const nm=escapeHtml(x.name||'匿名');
        const tx=escapeHtml(x.text||'');
        const tg=escapeHtml(x.tag||'未指定');
        return `<div class="item"><strong>${nm}</strong> <span class="hint">[${tg}]</span><div>${tx}</div><div class="hint">${t}</div></div>`;
      });
      listEl.innerHTML = rows.length? rows.join('') : '<div class="hint">暂无反馈，快来写下第一条吧～</div>';
    }
    function submitFeedbackFlexible(){
      const name=(document.getElementById('fb-name').value||'').trim();
      const text=(document.getElementById('fb-text').value||'').trim();
      const tag=(document.getElementById('fb-tag').value||'').trim();
      if(!text){ alert('请输入反馈内容'); return; }
      const list=getLocal(fbKey);
      list.push({name,text,tag,time:now()});
      setLocal(fbKey,list);
      document.getElementById('fb-text').value='';
      renderFlexible();
      alert('感谢你的反馈！(仅保存在本地)');
    }
    function prefill(tag){ const el=document.getElementById('fb-tag'); if(el){ el.value=tag; } scrollToId('fb'); }

    document.addEventListener('DOMContentLoaded',()=>{ 
      renderFlexible();
      document.querySelectorAll('.faq-q').forEach(q=>{
        q.addEventListener('click', ()=>{
          const a = q.parentElement.querySelector('.faq-a');
          if(!a) return;
          const open = a.style.display === 'block';
          a.style.display = open ? 'none' : 'block';
        });
      });
    });
  </script>
</body>
</html>